<!--  -->
<template>
  <div id="tag-box">
    <div class="tag-title">
      <span>热门标签</span>
    </div>
    <div class="tags">
      <span v-for="(i, index) in 5" :key="index" @click="changeIndex(index)" :class="[(tagIndex == index)?'on':'']">云服务</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},

  data () {
    return {
      tagIndex: 0
    }
  },

  computed: {},

  methods: {
    changeIndex: function (index) {
      this.tagIndex = index
    }
  }
}
</script>
<style lang='less' scoped>
  #tag-box {
    background: #ebecee;
    padding: 20px;
  }
  .tag-title {
    .t-l;
    .bd-bottom(rgba(0,0,0,0.05));
    margin-bottom: 10px;
    span {
      .ft(18);
      .bd-bottom(#5782e7,2px);
      height: 100%;
      display: inline-block;
    }
  }
  .tags {
    .t-l;
    span {
      cursor: pointer;
      font-size: 13px !important;
      padding: 2px 8px;
      background-color: #EEF1F3;
      border-color: #e5e5e5;
      margin: 0 6px 6px 0;
      position: relative;
      display: inline-block;
      color: #A3A3A3;
      -webkit-transition: all 200ms ease;
      transition: all 200ms ease;
      box-sizing: content-box;
      &:hover,
      &.on {
        color: #fff;
        background-color: #3782E7;
        text-decoration: none;
        border-color: #3782E7;
      }
    }
  }
</style>
